<template>
  <!-- 文章头部容器 -->
  <div class="p-6 sm:p-8 bg-white dark:bg-gray-800">
    <!-- 文章标题 -->
    <h1
      class="font-bold text-2xl sm:text-3xl lg:text-4xl leading-tight sm:leading-snug text-gray-900 dark:text-white mb-6"
    >
      {{ title }}
    </h1>

    <!-- Meta 信息 -->
    <div
      class="flex flex-wrap justify-start items-center text-xs sm:text-sm text-gray-500 dark:text-gray-400 gap-x-4 gap-y-2"
    >
      <div class="flex items-center">
        <ElAvatar
          :size="20"
          class="mr-2"
          src="https://foruda.gitee.com/avatar/1728913561713775492/9131495_qinfeng_wei_1728913561.png"
        />
        <span class="hidden sm:inline">忙里偷闲的sin</span>
        <span class="sm:hidden">作者</span>
      </div>

      <div class="flex items-center">
        <Icon name="time" width="16" height="16" class="mr-1 dark:text-white" />
        <span>{{ createTime }}</span>
      </div>

      <div class="flex items-center">
        <Icon name="words" width="14" height="14" class="mr-1 dark:text-white" />
        <span>{{ countMd }}字</span>
      </div>

      <div class="flex items-center">
        <Icon name="read" width="14" height="14" class="mr-1 dark:text-white" />
        <span>{{ readingMinutes }}分钟</span>
      </div>

      <div class="flex items-center">
        <Icon name="image" width="14" height="14" class="mr-1 dark:text-white" />
        <span>{{ imageCount }}图</span>
      </div>

      <div class="flex items-center">
        <svg
          class="w-4 h-4 mr-1 dark:text-white"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 20 14"
        >
          <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
            <path d="M10 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
            <path d="M10 13c4.97 0 9-2.686 9-6s-4.03-6-9-6-9 2.686-9 6 4.03 6 9 6Z" />
          </g>
        </svg>
        <span class="hidden sm:inline">阅读量 {{ visitCount }}</span>
        <span class="sm:hidden">{{ visitCount }}</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
const props = defineProps<{
  title: string
  createTime: string
  html: string
  visitCount: number
}>()
// 字数 统计
const countMd = ref(0)
const readingMinutes = ref(0)
const imageCount = ref(0)
mdHtml(props.html)
function mdHtml(htmlText: string) {
  const text = htmlText
    .replace(/<[^>]+>/g, '')
    .replace(/[\r\n]/g, '')
    .replace(/[ ]/g, '')
    .replace(/[\s+\.\!\/_,$%^*(+\"\']+|[+——！，。？、~@#￥%……&*（）]+/g, '')

  const wordCount = text.length
  countMd.value = <number>countWords(text.length)
  readingMinutes.value = Math.max(1, Math.ceil(wordCount / 300))
  imageCount.value = countImages(htmlText)
}
function countImages(htmlText: string): number {
  const imgTagRegex = /<img [^>]*src=['"]([^'"]+)['"][^>]*>/gi
  const matches = htmlText.match(imgTagRegex)
  return matches ? matches.length : 0
}

// 字数统计
function countWords(count: number) {
  if (count <= 1000) {
    return count
  } else {
    let counts = count / 1000
    // 留小数点一位数
    counts = Number(counts.toFixed(1))
    return counts + 'k'
  }
}
</script>
